<template>
  <div>
    <template v-if="item?.children">
      <el-sub-menu :index="item.path">
        <template #title>
          <el-icon :name="`el-icon-${item?.meta?.icon}`"></el-icon>
          <!-- <component :is="item.meta?.icon" class="icons" /> -->
          {{ item.meta?.title }}
        </template>
        <side-item
          v-for="child in item.children"
          :key="child.path"
          :item="child"
        />
      </el-sub-menu>
    </template>
    <el-menu-item v-else :index="item?.path">
      <!-- 动态导入 图标写法 -->
      <i-ep-edit />
      <!-- <IEpEdit /> -->
      <!-- <i class="i-ep-edit"></i> -->

      <el-icon>
        <component :is="item?.meta?.icon" class="icons"></component>
      </el-icon>
      <template #title>
        {{ item?.meta?.title }}
      </template>
    </el-menu-item>
    <!-- <el-sub-menu :index="menu.path"></el-sub-menu> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElIcon } from 'element-plus';

export default defineComponent({
  name: 'SideItem',
  components: {
    ElIcon,
  },
  props: {
    item: {
      type: Object as PropType<RouteRecordRaw>,
      default: null,
    },
  },
});
</script>

<style scoped lang="less">
.icons {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
</style>
